<template>
<div class="app-main">
  <div class="error404">
    <div class="error404-body-con">
      <vui-card>
        <div class="error404-body-con-title">4<span><vui-icon type="ios-navigate-outline"></vui-icon></span>4</div>
        <p class="error404-body-con-message">{{message}}</p>
        <div class="error404-btn-con">
          <vui-button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</vui-button>
          <vui-button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</vui-button>
        </div>
      </vui-card>
    </div>
  </div>
  <div class="lock-screen-back" id="lock_screen_back" style="transition: all 3s; height: 1632px; width: 1632px;"></div>
</div>
</template>

<script>
export default {
  name: 'Error404',
  data() {
    return  {
      from: null,
      message: ''
    }
  },
  methods: {
    backPage() {
      if (history.length === 3) {
        this.$router.push({
          path: '/'
        })
        return
      }
      if(session.store.changeAcc || !this.form){
        this.$router.push({
          path: '/'
        })
        this.$Message.info({
          content:  '抱歉你可能更换账号，该账号无法访问该页面，现在跳转主页',
          duration : 3
        })
        return
      }
      if (this.from)
        this.$router.go(-2);
    },
    goHome() {
      this.$router.push({
        path: '/'
      });
    }
  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      if (to.path === from.path)
        vm.from = false
      else
        vm.from = true
    })

  },
  created() {
    const message = decodeURIComponent(decodeURIComponent(this.$route.query.message))
    this.message = (message==='undefined'?'没找到页面!':message)
  }
};
</script>

<style scoped>
@keyframes error404animation {
  0% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(-60deg);
  }
  40% {
    transform: rotateZ(-10deg);
  }
  60% {
    transform: rotateZ(50deg);
  }
  80% {
    transform: rotateZ(-20deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}

.error404 {
  height: 620px;
}

.error404-body-con {
  width: 700px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.error404-body-con-title {
  text-align: center;
  font-size: 240px;
  font-weight: 700;
  color: #2d8cf0;
  height: 260px;
  line-height: 260px;
  margin-top: 40px;
}

.error404-body-con-title span {
  display: inline-block;
  color: #19be6b;
  font-size: 230px;
  animation: error404animation 3s ease 0s infinite alternate;
}

.error404-body-con-message {
  display: block;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 12px;
  color: #dddde2;
}

.error404-btn-con {
  text-align: center;
  padding: 20px 0;
  margin-bottom: 40px;
}

.app-main {
  width: 100%;
  height: 100%;
  position: relative;
}

.lock-screen-back {
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0 0 0 0 #667aa6 inset;
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 3s;
}
</style>
